import React from 'react';
import { useNavigate } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query';
import { getStatistics } from '../../api/admin';

function StatCard({ color, label, value, icon, loading }) {
  return (
    <div style={{ flex: 1, background: '#fff', borderRadius: 10, boxShadow: '0 1px 6px #f0f1f5', padding: 20, display: 'flex', alignItems: 'center', gap: 16, minWidth: 200 }}>
      <div style={{ width: 48, height: 48, borderRadius: 8, background: color, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 24 }}>{icon}</div>
      <div>
        <div style={{ color: '#666', fontSize: 14, marginBottom: 4 }}>{label}</div>
        <div style={{ fontSize: 24, fontWeight: 600, color: '#222' }}>
          {loading ? '加载中...' : typeof value === 'number' ? value.toLocaleString() : value}
        </div>
      </div>
    </div>
  );
}

function EntryCard({ title, desc, onClick }) {
  return (
    <div 
      onClick={onClick} 
      style={{ 
        cursor: 'pointer', 
        flex: '0 0 calc(33.333% - 12px)', 
        minWidth: 240,
        background: '#fff', 
        borderRadius: 10, 
        boxShadow: '0 1px 6px #f0f1f5', 
        padding: 20,
        transition: 'transform 0.2s, box-shadow 0.2s'
      }}
      onMouseEnter={(e) => {
        e.currentTarget.style.transform = 'translateY(-2px)';
        e.currentTarget.style.boxShadow = '0 4px 12px #e0e0e0';
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.transform = 'translateY(0)';
        e.currentTarget.style.boxShadow = '0 1px 6px #f0f1f5';
      }}
    >
      <div style={{ fontWeight: 600, fontSize: 16, marginBottom: 8, color: '#222' }}>{title}</div>
      <div style={{ color: '#888', fontSize: 13, lineHeight: 1.5 }}>{desc}</div>
    </div>
  );
}

function AdminHome() {
  const nav = useNavigate();
  
  // 获取统计数据
  const { data: stats, isLoading } = useQuery({
    queryKey: ['admin', 'statistics'],
    queryFn: getStatistics,
    retry: false,
  });

  return (
    <div style={{ padding: '20px 16px 100px 16px' }}>
      {/* 数据概览 */}
      <div style={{ fontSize: 20, fontWeight: 600, marginBottom: 16, color: '#222' }}>数据概览</div>
      <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', marginBottom: 32 }}>
        <StatCard 
          color="#1890ff" 
          label="总用户数" 
          value={stats?.totalUsers || 0} 
          icon="👥" 
          loading={isLoading}
        />
        <StatCard 
          color="#52c41a" 
          label="课程总数" 
          value={stats?.totalCourses || 0} 
          icon="📚" 
          loading={isLoading}
        />
        <StatCard 
          color="#faad14" 
          label="待审核申请" 
          value={stats?.pendingApplications || 0} 
          icon="📝" 
          loading={isLoading}
        />
      </div>

      {/* 功能入口 */}
      <div style={{ fontSize: 20, fontWeight: 600, marginBottom: 16, color: '#222' }}>功能入口</div>
      <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
        <EntryCard title="课程查询" desc="按教师姓名/工号或课程名称搜索课程" onClick={() => nav('/admin/search')} />
        <EntryCard title="用户管理" desc="管理所有学生和教师信息，支持查询、编辑和删除" onClick={() => nav('/admin/users')} />
        <EntryCard title="课程申请审核" desc="查看并处理教师的课程申请" onClick={() => nav('/admin/review')} />
        <EntryCard title="添加用户" desc="通过表单快速创建学生或教师账号" onClick={() => nav('/admin/add-student')} />
      </div>
    </div>
  );
}
export default AdminHome;

